<script setup lang="ts">
import type { OptionsStatus } from '@/types'
import {computed,ref} from 'vue'
import MaterialHeader from '@/components/Materials/Commons/MaterialHeader.vue'
import { getCurrentStatus, getPicTitleDescStatusArr, getStringStatus, getTextStatus } from '@/utils'
const inputValue = ref<string>('')
const props = defineProps<{
  status:OptionsStatus,
  serialNum: number
}>()


const computedState = computed(()=>({
  textType: getCurrentStatus(props.status.textType),
  title: getTextStatus(props.status.title),
  desc: getTextStatus(props.status.desc),
  options: getStringStatus(props.status.options),
  position: getCurrentStatus(props.status.position),
  titleSize: getPicTitleDescStatusArr(props.status.titleSize),
  descSize: getPicTitleDescStatusArr(props.status.descSize),
  titleWeight: getCurrentStatus(props.status.titleWeight),
  descWeight: getCurrentStatus(props.status.descWeight),
  titleItalic: getCurrentStatus(props.status.titleItalic),
  descItalic: getCurrentStatus(props.status.descItalic),
  titleColor: getTextStatus(props.status.titleColor),
  descColor: getTextStatus(props.status.descColor),
}))

const emitAnswer = ()=>{

}
</script>

<template>
  <div class="text-input" :class="{
      'text-center': computedState.position,
    }">
    <MaterialHeader
      :serialNum="serialNum"
      :title="computedState.title"
      :desc="computedState.desc"
      :titleSize="computedState.titleSize"
      :descSize="computedState.descSize"
      :titleWeight="computedState.titleWeight"
      :descWeight="computedState.descWeight"
      :titleItalic="computedState.titleItalic"
      :descItalic="computedState.descItalic"
      :titleColor="computedState.titleColor"
      :descColor="computedState.descColor"></MaterialHeader>
    <el-input
      v-if="computedState.textType === 0"
      v-model="inputValue"
      @click.stop
      @input="emitAnswer"
    />
    <el-input
      v-else
      :rows="5"
      type="textarea"
      v-model="inputValue"
      @click.stop
      @input="emitAnswer"
    />
  </div>
</template>

<style scoped lang="scss">

</style>
